<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  </head>
  
  <body>
    <div class="store"></div>
    <div class="model">
        <ul>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li>
                <div></div>
            </li>
            <li class="last">
                <div></div>
            </li>
        </ul>
    </div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            //store可以存储多个键值对、或者其它数据类型
            var store = $(".store").data({
                "key": "key"
            });
            console.log(store.data("key"));
            //$().each专门用于遍历jQuery对象，而$.each可以遍历任何对象
            $("div.model li").each(function(index) {
                var li = $(this);
                var div = li.find("div");
                li.data("contentDiv", div);
            });
            $.each($("div.model li"), function(index, value) {
                console.log(index + "-->" + $(value).data("contentDiv").html("第" + index + "个无序列表"));
            });
            //使用data还可以存放其它jQuery对象的引用，从而建立关联关系
            $("li:first").data("contentDiv").html("第一个无序列表");
            if ($.inArray(3, [1,2,3,4,5,6,7]) != -1) {
                console.log("找到了指定的元素");
            }
            
            var source = {
                username: "张三",
                eat: function() {
                    console.log("可以吃饭！");
                }
            };
            var target = {
                    username: "李四"
            };
            //相当于创建了一个新的对象，并继承两个对象的方法
            //后一个对象会覆盖前一个对象的属性 
            //设置第一个参数为{}可以避免修改后面两个参数
            var newObj = $.extend({}, source, target);
            console.log(source);
            console.log(target);
            console.log(newObj);
            
            //深入理解apply和call的使用方法
            function Person(name, age) {
                this.name = name;
                this.age = age;
            }
            function Student(name, age, grade) {
                //如果不使用apply，Student类将无法接收name和age属性
                //因为Student类中并未存在name和age的set方法
                //arguments是一个对象，虽然看起来像数组
                //但是无法像操作数组一样去操作它
                //Array.prototype.slice.call(argument)将它转换为真的数组
                //不能在调用过apply的对象里面再调用call，会报错
                Person.apply(this, arguments);
                this.grade = grade;
            }
            function Worker(name, age, score) {
                //call和apply的一个区别是后跟的参数
                //call只能是参数列表，所以必须一个一个的写出来
                //而apply是参数数组，所以直接传递arguments即可
                //调用者都是要覆盖作用域的对象
                Person.call(this, name, age);
                //this.score = score;
                Student.apply(this, arguments);
            }
            var robot = {
                id: 20,
                say: function() {
                    console.log(this);
                },
                test: function() {
                    console.log("也可以传递函数名：" + this);
                }
            };
            var newStu = new Student("张三", 14, "20分");
            for (var property in newStu) {
                console.log(newStu[property]);
            }
            var newWk = new Worker("程序员", 23, "80分");
            for (var property in newWk) {
                console.log(property + "---->" + newWk[property]);
            }
            
            //$.proxy是指在指定的作用域下执行指定的方法
            $.proxy(robot.say, newWk)();
            //直接调用返回的是原生的dom元素
            //使用$.proxy返回的是jQuery对象
            $("body").click(robot.test);
            $("body").click($.proxy(robot.test, this));
            $("body").click($.proxy(robot.test, $(this)));
            $("body").click($.proxy(robot, "test"));
            
            //测试类型
            //有些时候typeof的返回结果是反复无常和迷惑的
            console.log($.isArray([]));
            console.log($.isFunction(function(){}));
            console.log($.isNumeric(3.145));
            console.log(typeof /test/);
            console.log(typeof new Date());
            console.log($.type(/test/));
            console.log($.type(new Date()));
            
            //$.each用于迭代数组、集合等 不用于迭代jQuery对象集合
            console.log($("li").length);
            //写法虽然可以执行但是不推荐
            $.each($("li"), function(index, value) {
                console.log($(value));
            })
            $("li").each(function(index, element) {
                //此处的第二个参数是代替this，防止作用域变换以后，所出现的问题
                console.log($(element) + "--->" + $(this));
            })
            //下列对象伪装成数组
            var masquerade = {"length": 2, 0: "tony", 1: "subtracty"};
            //使用makeArray转换成真正的数组
            var array = $.makeArray(masquerade);
            console.log(masquerade);
            console.log(array);
            $.map($("li"), function(key, index) {
                console.log($(key) + "-->" + index)
            });
            $.map(masquerade, function(key, index) {
                console.log(key + "-->" + index)
            });
            //.map $().map和.each $().each一个是对应于原生js一个是jQuery
            $.map(array, function(key, index) {
                console.log(key + "-->" + index)
            });
            
            //jQuery的setter类方法可以执行一个匿名函数相当于对所有对象操作
            $("li").each(function(i, el) {
                if ($(el).attr("class") === "last") {
                    $(el).text("找到");
                }
            });
            $("li").text(function(index, value) {
                if (index < 2) {
                    return "找到索引小于2的元素";
                }
            });
            
            //index不加返回值是返回同辈元素的位置
            //如果是一个结果集执行index则相当于first执行返回第一个元素的索引位置
            console.log($("li:last").index());
            console.log($("li:last").index("li"));
            //参数在调用的jQuery对象集合中的索引
            console.log($("li").index($("li:last")));
        });
    </script>
  </body>
</html>